import { styled, history, useAccess, Access } from '@umijs/max'
import { Space, Spin } from 'antd';
import { Card } from "@/components/Card"
import RadioButton from "@/components/RadioButton"
import { useState } from 'react';
import { BusinessInfo, chargeCount } from './services';
import { RightOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import dayjs from 'dayjs';
import { jump2target } from '@/utils/common';

interface RowData1Props {
  baseInfo?: BusinessInfo
  loading?: boolean
}

const Container = styled.div`
  width: 100%;
  display: flex;
  gap: 24px;

  .content {
    width: 100%;
    height: 102px;
    display: flex;
    justify-content: space-between;

    .item {
      width: 158px;
      height: 100%;

      .label {
        height: 18px;
        line-height: 18px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #828282;
      }

      .value {
        height: 42px;
        line-height: 42px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        font-size: 32px;
        color: #222222;
        margin-top: 16px;
      }

      .footer {
        height: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: #E41019;
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 10px;
        cursor: pointer;
      }
    }
  }
`

const RowData1: React.FC<RowData1Props> = (props) => {
  const [tabValue, setTabValue] = useState<string>('today')
  const { data, loading } = useRequest(() => chargeCount({
    day: tabValue === 'today' ? dayjs().format('YYYYMMDD') : dayjs().subtract(1, 'day').format('YYYYMMDD'),
  }), {
    refreshDeps: [tabValue],
  })
  const access = useAccess()

  const jump2target2 = (path: string) => {
    jump2target(path, {needRefresh: true})
  }

  return (
    <Container>
      <Card header='企业数据'>
        <Spin spinning={props.loading}>
          <div className="content">
            <div className="item">
              <div className="label">企业余额（元）</div>
              <div className="value">{props.baseInfo?.balance || 0}</div>
              <Access accessible={access['/bigRecharge']}>
                <div className="footer" onClick={() => jump2target2('/bigRecharge')}>
                  <span>余额变动记录</span>
                  <RightOutlined />
                </div>
              </Access>
            </div>
            <div className="item">
              <div className="label">车辆数量（辆）</div>
              <div className="value">{props.baseInfo?.carNum || 0}</div>
              <Access accessible={access['/bigCar']}>
                <div className="footer" onClick={() => jump2target2('/bigCar')}>
                  <span>车辆列表</span>
                  <RightOutlined />
                </div>
              </Access>
            </div>
            <div className="item">
              <div className="label">用户数量（人）</div>
              <div className="value">{props.baseInfo?.userNum || 0}</div>
              <Access accessible={access['/bigNormal']}>
                <div className="footer" onClick={() => jump2target2('/bigNormal')}>
                  <span>用户列表</span>
                  <RightOutlined />
                </div>
              </Access>
            </div>
          </div>
        </Spin>
      </Card>
      <Card
        header={
          <Space size={12}>
            <span>充电数据</span>
            <RadioButton
              items={[
                {label: '今日', value: 'today'},
                {label: '昨日', value: 'yesterday'},
              ]}
              value={tabValue}
              onChange={setTabValue}
            />
          </Space>
        }
      >
        <Spin spinning={loading}>
          <div className="content">
            <div className="item">
              <div className="label">充电量（度）</div>
              <div className="value">{data?.data.power || 0}</div>
            </div>
            <div className="item">
              <div className="label">充电次数（次）</div>
              <div className="value">{data?.data.orderNum || 0}</div>
            </div>
            <div className="item">
              <div className="label">充电金额（元）</div>
              <div className="value">{data?.data.totalMoney || 0}</div>
            </div>
          </div>
        </Spin>
      </Card>
    </Container>
  );
};

export default RowData1;
